<template>
	<view class="carousel" v-if="swiper && classify && headlines">
		<!--轮播图-banner-->
		<view class="tui-banner-box" v-if="swiper.length">
			<swiper
				:indicator-dots="true" 
				indicator-color="rgba(0, 0, 0, 0.3)"
				indicator-active-color="rgba(255, 255, 255,.8)"
				:autoplay="true"
				:interval="2500"
				:duration="600"
				class="tui-banner-swiper"
				:circular="true"
				previous-margin="60rpx"
				next-margin="60rpx"
				@change="change"
			>
				<swiper-item v-for="(item, index) in swiper" :key="index" class="tui-banner-item">
					<image
						:src="item.image"
						class="tui-slide-image"
						:class="[current != index ? 'tui-banner-scale' : '']"
						mode="scaleToFill"
						lazy-load
						@tap="detail"
					/>
				</swiper-item>
			</swiper>
		</view>
		<!--banner-->

		<!--公告-headlines-->
		<view class="tui-rolling-news list-item" v-if="headlines.length">
			<!-- <tui-icon name="news" :size="22" color="#555"></tui-icon> -->
			<view class="hline-icon">
				<image src="/static/images/icon/公告.png" mode=""></image>
			</view>
			
			<swiper :vertical="true" :autoplay="true" :circular="true" :interval="4000" class="tui-swiper">
				<swiper-item v-for="(item, index) in headlines" :key="index" class="tui-swiper-item" >
					<view class="tui-news-item">{{ item.alltext }}</view>
				</swiper-item>
			</swiper>
		</view>
		<!--headlines-->
		
		
		<!--首页快捷类别-classify-->
		<view class="tui-classify-box" v-if="classify.length" >
			<view class="tui-classify-item" v-for="(item, index) in classify" :key="index" @tap="goPage(item)" :data-key="item.name">
				<image :src="item.icon" class="tui-classify-img" lazy-load/>
				<view class="tui-classify-name">{{ item.name }}</view>
			</view>
		</view>
		</view>
	</view>
</template>

<script>
	
	import Vue from 'vue'
	import api from '../../../common/api.js'
	
	export default {
		props:['swiper','classify','headlines'],
		data() {
			return {
				banner: ['1.jpg', '2.jpg', '3.jpg', '4.jpg', '5.jpg'],
				// swiper:[],
				userposts:[	],
				// classify: [],
				current: 0,
				// headlines: [],
				
			};
		},
		methods: {
			change(e) {
				this.current = e.detail.current;
			},
			
			detail() {
				uni.navigateTo({
					url: '/pages/template/mall/productDetail/productDetail'
				});
			},
			
			goPage(item) {
				// let key = e.currentTarget.dataset.key || '';
				console.log(item.page_to);
				// uni.navigateTo({
				// 	url: item.page_to	
				// });
				if(item.page_to	 == '/pages/circle/index' || item.page_to	 == '/pages/post/index') {
					uni.switchTab({
					  url: item.page_to
					});
				}else {
					uni.navigateTo({
						url: item.page_to	
					});
				}
				
			},
			
		},
		
	};
</script>

<style lang="scss" scoped>
.carousel {
	// padding-bottom: 50rpx;
	box-sizing: border-box;
	
}

/*banner*/

.tui-banner-box {
	width: 100%;
	height: 250rpx;
	box-sizing: border-box;
	background-color: #F3F6F5;
	border-bottom: 15rpx solid #F3F6F5;
	// box-shadow: black 0px 0px 30px 5px;
	
}

.tui-banner-swiper {
	width: 100%;
	height: 250rpx;
}

.tui-banner-item {
	padding: 0 16rpx;
	box-sizing: border-box;
}

.tui-slide-image {
	width: 100%;
	height: 100%;
	display: block;
	border-radius: 12rpx;
	transition: all 0.1s linear;
}

.tui-banner-scale {
	transform: scaleY(0.9);
	transform-origin: center center;
}

/* #ifdef MP-WEIXIN */
.tui-banner-swiper .wx-swiper-dot {
	width: 8rpx;
	height: 8rpx;
	display: inline-flex;
	background: none;
	justify-content: space-between;
}

.tui-banner-swiper .wx-swiper-dot::before {
	content: '';
	flex-grow: 1;
	background: rgba(255, 255, 255, 0.8);
	border-radius: 16rpx;
	overflow: hidden;
}

.tui-banner-swiper .wx-swiper-dot-active::before {
	background: #fff;
}

.tui-banner-swiper .wx-swiper-dot.wx-swiper-dot-active {
	width: 16rpx;
}

/* #endif */

/* #ifndef MP-WEIXIN */
>>> .tui-banner-swiper .uni-swiper-dot {
	width: 8rpx;
	height: 8rpx;
	display: inline-flex;
	background: none;
	justify-content: space-between;
}

>>> .tui-banner-swiper .uni-swiper-dot::before {
	content: '';
	flex-grow: 1;
	background: rgba(255, 255, 255, 0.8);
	border-radius: 16rpx;
	overflow: hidden;
}

>>> .tui-banner-swiper .uni-swiper-dot-active::before {
	background: #fff;
}

>>> .tui-banner-swiper .uni-swiper-dot.uni-swiper-dot-active {
	width: 16rpx;
}

/* #endif */
/*banner*/

/*headlines*/

.tui-rolling-news {
	width: 100%;
	padding: 0 30rpx;
	box-sizing: border-box;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: nowrap;
	background: #fff;
	.hline-icon {
		width: 50rpx;
		height: 50rpx;
		image {
			width: 100%;
			height: 100%;
		}
	}
	
	// box-shadow: #e2e2e2 4px 4px 20px 0px ;
}

.tui-rolling-news::after {
	left: 0;
}

.tui-swiper {
	margin-left: 8rpx;
	font-size: 28rpx;
	height: 95rpx;
	flex: 1;
}

.tui-swiper-item {
	display: flex;
	align-items: center;
}

.tui-news-item {
	line-height: 34rpx;
	font-size: 34rpx;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	color: #555;
}

/*headlines*/

/*classify*/

.tui-classify-box {
	width: 750rpx;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	padding: 40rpx 10rpx;
	box-sizing: border-box;
	background-color: #fff;
	border-top: 15rpx solid #F3F6F5;
	border-bottom: 15rpx solid #F3F6F5;
}

.tui-classify-item {
	width: 25%;
	text-align: center;
}

.tui-classify-img {
	width: 100rpx;
	height: 100rpx;
	background-color: #ccc;
	border-radius: 50%;
}

.tui-classify-name {
	font-size: 26rpx;
	line-height: 26rpx;
	padding-top: 8rpx;
	color: #555;
	white-space: nowrap;
}

/*classify*/

/*spike*/

.tui-spike-box {
	background: #fff;
	margin-top: 20rpx;
}

.tui-spike-title {
	padding: 20rpx 30rpx;
	box-sizing: border-box;
	font-size: 30rpx;
	color: #333;
	font-weight: bold;
}

.tui-spike-title::after {
	left: 0;
}

.tui-spike-swiper {
	min-height: 440rpx;
}

.tui-pro-item {
	display: flex;
	width: 100%;
	background: #fff;
	box-sizing: border-box;
	border-radius: 12rpx;
	position: relative;
}

.tui-pro-item::after {
	left: 240rpx;
}

.tui-pro-img {
	width: 220rpx;
	height: 220rpx;
	display: block;
	flex-shrink: 0;
	border-radius: 12rpx;
}

.tui-pro-content {
	flex: 1;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	box-sizing: border-box;
	padding: 20rpx;
}

.tui-pro-tit {
	color: #2e2e2e;
	font-size: 26rpx;
	word-break: break-all;
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
}

.tui-pro-btmbox {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.tui-sale-price {
	font-size: 34rpx;
	font-weight: 500;
	color: #e41f19;
}

.tui-factory-price {
	font-size: 24rpx;
	color: #a0a0a0;
	text-decoration: line-through;
	padding-left: 12rpx;
}

.tui-countdown {
	display: flex;
	align-items: center;
}

.tui-countdown-text {
	padding: 0 8rpx;
	font-size: 24rpx;
	line-height: 24rpx;
	color: #555;
}

/*spike*/
</style>
